<template>
  <div class="departments" v-loading="isloading">
    <!-- 最外层的卡片 -->
    <el-card class="card">
      <!-- tabs 选项卡 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">
          <div class="content">
            <!-- 完成顶部组织结构 -->
            <treetools :item="topTree"></treetools>
            <!-- 分割线 -->
            <hr />
            <!-- 组织结构的静态部分 -->
            <el-tree :data="resList" :props="defaultProps" default-expand-all>
              <template slot-scope="{ data }">
                <treetools
                  @open-add="openadd"
                  @open-edit="openedit"
                  @refreshdata="getAllDepart"
                  :item="data"
                ></treetools>
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增组件 -->
    <!-- <adddepa
      @update:showDialog="bool => (showDialog = bool)"
      :showDialog="showDialog"
      @refreshdata="getAllDepart"
      :currentObj="currentObj"
    ></adddepa> -->
    <adddepa
      ref="myadd"
      :showDialog.sync="showDialog"
      @refreshdata="getAllDepart"
      :currentObj="currentObj"
    ></adddepa>
  </div>
</template>

<script>
// 导入树操作栏组件
import treetools from './components/tree-tools.vue'
// 导入新增的组件
import adddepa from './components/add-depa.vue'
// 导入操作组织结构的方法
import { getDepartmentApi } from '@/api/department'
export default {
  data () {
    return {
      // 显示加载动画
      isloading: false,
      activeName: 'first',
      // 顶部结构的数据源
      topTree: {
        manager: '负责人',
        isTop: true // 控制 删除组织 & 查看组织是否显示的属性
      },
      // 设置数据源的结构
      defaultProps: {
        label: 'name'
      },
      // 数组结构数据源
      treeList: [],
      // 转换好之后的数组
      resList: [],
      // 控制新装面板的显示与隐藏
      showDialog: false,
      // 记录当前操作（新增子部门）的部门
      currentObj: {}
    }
  },
  methods: {
    // 打开编辑面板
    openedit (item) {
      // 打开面板
      this.showDialog = true
      // 保存当前的操作的数据对象
      this.currentObj = item
      // 查询数据：（调用子组件中的方法：getDepartmentById）
      // 在父组件中调用子组件中的方法：
      // 1.0 给子组件添加一个属性 ref
      // 2.0 通过 this.$refs.xxx 来得到子组件
      // 3.0 调用方法： this.$refs.xxx.方法
      this.$refs.myadd.getDepartmentById(item.id)
    },
    // 打开新增面板
    openadd (item) {
      // 打开新增面板
      this.showDialog = true
      // 记录当前操作是为谁而操作的
      this.currentObj = item
      // 不需要查询数据
    },
    // 获取所有的组织结构数据
    async getAllDepart () {
      // 开启加载动画
      this.isloading = true
      const res = await getDepartmentApi()
      // 保存所有的组织结构数据
      this.treeList = res.depts
      // 将没有嵌套结构的数据转为树状结构
      this.resList = this.turnData('')
      // 将组织结构数据中的第一条赋值给 topTree
      this.topTree = { ...res.depts[0], ...this.topTree }
      // 关闭加载动画
      this.isloading = false
    },
    // 将数据转换为树状结构数据
    // 子元素的 pid
    turnData (str) {
      // 定义一个转换后的数组
      var resArr = []
      this.treeList.forEach(item => {
        if (item.pid === str) {
          // 得到 item 下的子元素
          var children = this.turnData(item.id)
          if (children.length > 0) {
            item.children = children
          }
          resArr.push(item)
        }
      })
      return resArr
    }
  },
  created () {
    // 得到所有的组织结构数据
    this.getAllDepart()
  },
  components: {
    treetools,
    adddepa
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
  .card {
    padding: 20px 40px;
    .content {
      padding: 40px 80px;
    }
  }
}
</style>
